<template>
    <view class="container">
        <header-bar :config="config" @rightClick="rightClick"></header-bar>
        <tab-bar :tabs="tabs" @clickTab="clickTab" :tabIndex="tabIndex" :hasBbottom="true" background="none"></tab-bar>
        <view class="main">
            <swiper
                v-if="loadOk"
                class="swiper"
                :style="{ height: listHeight }"
                :current="tabIndex"
                @change="swiperChange">
                <swiper-item v-for="(item, index) in tabs" :key="item.title">
                    <choose-date ref="chooseDatePanel" v-if="index == 5" @selDate="selDate"></choose-date>
                    <view class="account-info">
                        <view class="name">{{ parentData.AName }}</view>
                        <view class="total"> <text>¥</text>{{ parentData.Total }} </view>
                        <view class="flow">
                            <view class="flow-l">收入 {{ accountStatistics.RTotal }}</view>
                            <view class="flow-r">支出 {{ accountStatistics.PTotal }}</view>
                        </view>
                    </view>
                    <view class="filter-wrap">
                        <view class="name">收支明细（{{ waitTotal }}）</view>
                        <!-- <view class="filter-tabs">
							<view class="t-item on">全部</view>
							<view class="t-item">收入</view>
							<view class="t-item">支出</view>
						</view> -->
                    </view>
                    <flow-list ref="flowList" :height="sublistHeight" @totalBack="waitTotalBack"></flow-list>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script>
import utils from "@/utils/utils.js"
import { getAccountStatistics, getAccountDetailPage } from "@/service/api/erp.js"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import tabBar from "../components/tab-bar.vue"
import flowList from "./flow-list.vue"
import purchaseList from "@/pages_work/components/purchase/purchase-list.vue"
import purchaseAction from "@/pages_work/components/purchase/purchase-action.vue"
import chooseDate from "../components/choose-date.vue"
export default {
    components: {
        flowList,
        purchaseList,
        tabBar,
        purchaseAction,
        chooseDate,
    },
    data() {
        return {
            config: {
                title: "",
                centerSlot: true,
                rightSlot: false,
                color: ["#333333"],
                statusBarFontColor: "#ffffff",
                rightBtns: [
                    {
                        id: 1,
                        type: "scan",
                    },
                ],
            },
            listHeight: "",
            sublistHeight: "",
            loadOk: false,
            tabIndex: 0,
            tabs: [
                {
                    title: "全部",
                },
                {
                    title: "今日",
                },
                {
                    title: "本周",
                },
                {
                    title: "本月",
                },
                {
                    title: "本年",
                },
                {
                    title: "自定义",
                },
            ],
            waitTotal: 0,
            total: 0,
            parentData: {},
            searchForm: {
                startDate: "",
                endDate: "",
                code: "",
            },
            accountStatistics: {}, // 账户收支统计
        }
    },
    created() {
        let mainColor = this.easyGetColor("white")
        this.config.backgroundColor = [1, mainColor]
    },
    onLoad(options) {
        this.parentData = JSON.parse(decodeURIComponent(options.data))
        this.config.title = this.parentData.AName
        this.searchForm.code = this.parentData.ACode
    },
    mounted() {
        this.getListHeight()
        setTimeout(() => {
            if (this.$refs.flowList[this.tabIndex]) {
                this.$refs.flowList[this.tabIndex].refresh(this.searchForm)
            }
        }, 300)
    },
    onShow() {
        this.init()
        getAccountStatistics(this.searchForm).then((res) => {
            if (res.State == 1) {
                this.accountStatistics = res.Data
            }
        })
    },
    methods: {
        init() {
            getAccountDetailPage(this.searchForm).then((res) => {})
        },
        getListHeight() {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                this.listHeight = e + "px"
                this.sublistHeight = e - uni.upx2px(400) + "px"
                this.loadOk = true
            })
        },
        swiperChange(e) {
            let tabIndex = e.detail.current
            this.clickTab(tabIndex)
        },
        //tab切换
        clickTab(index) {
            if (this.tabIndex != index) {
                clearTimeout(this.timer)
                this.timer = setTimeout((time) => {
                    this.tabIndex = index
                    this.upTab()
                    if (this.tabIndex == 0) {
                        // 全部
                        this.searchForm.startDate = ""
                        this.searchForm.endDate = ""
                    } else if (this.tabIndex == 1) {
                        // 今日
                        this.searchForm.startDate = utils.today().startDate
                        this.searchForm.endDate = utils.today().endDate
                    } else if (this.tabIndex == 2) {
                        // 本周
                        this.searchForm.startDate = utils.thisWeek().startDate
                        this.searchForm.endDate = utils.thisWeek().endDate
                    } else if (this.tabIndex == 3) {
                        // 本月
                        this.searchForm.startDate = utils.thisMonth().startDate
                        this.searchForm.endDate = utils.thisMonth().endDate
                    } else if (this.tabIndex == 4) {
                        // 本年
                        this.searchForm.startDate = utils.thisYear().startDate
                        this.searchForm.endDate = utils.thisYear().endDate
                    } else if (this.tabIndex == 5) {
                        this.$refs.flowList[this.tabIndex].datas = []
                        this.$nextTick(() => {
                            this.$refs.chooseDatePanel[0].openStarDate()
                        })
                    }
                    if (this.tabIndex != 5) {
                        this.$refs.flowList[this.tabIndex].refresh(this.searchForm)
                    }
                }, 20)
            }
        },
        selDate(e) {
            let dateArr = e.split(",")
            this.searchForm.startDate = dateArr[0]
            this.searchForm.endDate = dateArr.length > 1 ? dateArr[1] : dateArr[0]
            this.$refs.flowList[this.tabIndex].refresh(this.searchForm)
        },
        upTab() {
            this.$forceUpdate()
        },
        toNavPage(type) {
            let url = "/pages_erpA8/manage/balance"
            this.easyGoTo(url)
        },
        waitTotalBack(e) {
            this.waitTotal = e
        },
    },
}
</script>

<style lang="scss">
.account-info {
    position: relative;
    display: flex;
    height: 300rpx;
    margin: 28rpx $app-item-padding 24rpx;
    padding: 0 44rpx;
    border-radius: 40rpx;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    color: #fff;
    background: url("~@/static/img/erp/bg_acct.png") no-repeat $app-color-main;
    background-size: 100% 300rpx;
    .name {
        font-size: 28rpx;
    }
    .total {
        padding: 20rpx 0;
        font-size: 48rpx;
        font-weight: bold;
        text {
            font-size: 20rpx;
            font-weight: normal;
        }
    }
    .flow {
        display: flex;
        font-size: 28rpx;
        .flow-l {
            padding-right: 100rpx;
        }
    }
}
.filter-wrap {
    display: flex;
    justify-content: space-between;
    padding: 0 $app-item-padding 24rpx;
    align-items: center;
    .name {
        font-size: 32rpx;
    }
    .filter-tabs {
        display: flex;
        font-size: 24rpx;
        .t-item {
            height: 50rpx;
            line-height: 50rpx;
            padding: 0 24rpx;
            &.on {
                background: #ececec;
                border-radius: 28rpx;
            }
        }
    }
}
</style>
